import { listMyChartByPageUsingPost } from '@/services/AiBi/chartController';
import { useModel } from '@@/exports';
import { Helmet } from '@umijs/max';
import { Avatar, Button, Card, Col, List, message, Popover, Result, Row, Space } from 'antd';
import ReactECharts from 'echarts-for-react';
import React, { useEffect, useState } from 'react';
import Settings from '../../../../config/defaultSettings';

const MyChartPage: React.FC = () => {
  const initParams = { pageSize: 12, current: 1, sortField: 'createTime', sortOrder: 'desc' };
  const [searchParams, setSearchParams] = useState<API.ChartQueryRequest>({ ...initParams });
  const [total, setTotal] = useState<number>(0);
  const [chartList, setChartList] = useState<API.Chart[]>([]);
  const [submit, setSubmit] = useState<boolean>(false);
  const { initialState, setInitialState } = useModel('@@initialState');
  const { currentUser } = initialState ?? {};

  const getData = async () => {
    console.log(currentUser.userAvatar);
    setSubmit(true);
    try {
      const res = await listMyChartByPageUsingPost(searchParams);
      if (res.data) {
        setChartList(res.data.records ?? []);
        setTotal(res.data.total ?? 0);
      } else {
        message.error('获取图表失败');
      }
    } catch (e: any) {
      message.error('获取图表列表失败' + e.message);
    }
    setSubmit(false);
  };

  useEffect(() => {
    getData();
  }, [searchParams]);

  return (
    <div className={'myChartPage'}>
      <Helmet>
        <title>
          {'我的图表'} - {Settings.title}
        </title>
      </Helmet>
      <List
        grid={{ gutter: 6, column: 2 }}
        pagination={{
          onChange: (page, pageSize) => {
            setSearchParams({
              ...searchParams,
              current: page,
              pageSize,
            });
          },
          pageSize: initParams.pageSize,
          // pageSize: searchParams.pageSize,
          current: searchParams.current,
          total: total,
        }}
        loading={submit}
        dataSource={chartList}
        renderItem={(item) => (
          <List.Item key={item.id}>
            <Card>
              <List.Item.Meta
                avatar={<Avatar src={currentUser.userAvatar} />}
                title={item.chartName}
                description={item.chartType ? '图表类型:' + item.chartType : undefined}
              />

              <>
                {item.status === 'succeed' && (
                  <>
                    <Row>
                      <Col span={10}>
                        <div style={{ marginBottom: 6 }} />
                        <p>需求: {item.goal}</p>
                        <div style={{ marginBottom: 6 }}></div>
                      </Col>
                      <Col span={10}>
                        <div style={{ marginBottom: 6 }} />
                        <p>状态: {item.status}</p>
                        <div style={{ marginBottom: 6 }}></div>
                      </Col>
                      <Col span={4}>
                        <Space wrap>
                          <Popover content={item.genResult} title="分析结果" trigger="hover">
                            <Button>分析结果</Button>
                          </Popover>
                        </Space>
                      </Col>
                    </Row>
                    <ReactECharts option={item?.genChart && JSON.parse(item.genChart)} />
                  </>
                )}
              </>
              <>
                {item.status === 'running' && (
                  <>
                    <Result status={'info'} title={'生成中'} subTitle={item.exeMessage}></Result>
                  </>
                )}
              </>
              <>
                {item.status === 'wait' && (
                  <>
                    <Result status={'info'} title={'待生成'} subTitle={item.exeMessage}></Result>
                  </>
                )}
              </>
              <>
                {item.status === 'failed' && (
                  <>
                    <Result
                      status={'error'}
                      title={'图表生成失败'}
                      subTitle={item.exeMessage ?? '系统繁忙'}
                    ></Result>
                  </>
                )}
              </>
            </Card>
          </List.Item>
        )}
      />
    </div>
  );
};
export default MyChartPage;
